<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<title>Insert title here</title>
<style>
* {
	margin: 0;
	padding: 0;
}

html {
	background-color: #f5f5f5;
}

.head {
	width: 100%;
	height: 66px;
	position: fixed;
	z-index: 100000;
	background-color: white;
	top: 0px;
}

.head-content {
	width: 1300px;
	height: 66px;
	margin: 0 auto;
}

.logo-img {
	width: 66px;
	height: 66px;
	position: relative;
	top: -1px;
}

.logo-text {
	position: relative;
	top: -1px;
}

.ul-head {
	width: 888px;
	position: relative;
	left: 320px;
	top: -70px;
	height: 66px;
	list-style: none;
}

.ul-head li {
	padding: 0px 20px;
	line-height: 66px;
	cursor: pointer;
}

.ul-head li {
	font-size: 14px;
	float: left;
}

.ul-head li:nth-child(1) {
	margin-left: 36px;
}

.ul-head li:hover {
	background-color: #4f4f4f;
	color: white;
}

.head-right {
	height: 66px;
	width: 360px;
	position: relative;
	top: -140px;
	left: 890px;
	text-align: center;
	line-height: 66px;
	font-size: 14px;
}

.open li {
	cursor: pointer;
	height: 66px;
	width: 47px;
	float: left;
	font-size: 14px;
	text-align: center;
	line-height: 66px;
}

.portrait {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	position: absolute;
	right: 0px;
	border-radius: 50%;
	cursor: pointer;
	top: 10px;
}

.dLogin {
	position: relative;
	height: 165px;
	width: 130px;
	background: white;
	left: 885px;
	top: -143px;
	display: none;
}

.dRegister {
	position: relative;
	height: 110px;
	width: 130px;
	background: white;
	left: 975px;
	top: -143px;
	display: none;
}

.dLogin-ul, .dRegister-ul, .open {
	list-style: none;
}

.dLogin-ul li, .dRegister-ul li {
	cursor: pointer;
	height: 55px;
	width: 130px;
	float: left;
	font-size: 14px;
	text-align: center;
	line-height: 55px;
}

.dLogin-ul li:hover, .dRegister-ul li:hover {
	background-color: #4f4f4f;
	color: white;
}

.dPersonal {
	position: absolute;
	height: 55px;
	width: 130px;
	background: white;
	left: 1276px;
	top: 60px;
	display: none;
}

.dPersonal-div {
	cursor: pointer;
	height: 55px;
	width: 130px;
	float: left;
	font-size: 14px;
	text-align: center;
	line-height: 55px;
}

.dPersonal-div:hover {
	background-color: #4f4f4f;
	color: white;
}

.tPersonal {
	position: absolute;
	height: 55px;
	width: 130px;
	background: white;
	left: 1276px;
	top: 60px;
	display: none;
}

.tPersonal-div {
	cursor: pointer;
	height: 55px;
	width: 130px;
	float: left;
	font-size: 14px;
	text-align: center;
	line-height: 55px;
}

.tPersonal-div:hover {
	background-color: #4f4f4f;
	color: white;
}

.mPersonal {
	position: absolute;
	height: 55px;
	width: 130px;
	background: white;
	left: 1276px;
	top: 60px;
	display: none;
}

.mPersonal-div {
	cursor: pointer;
	height: 55px;
	width: 130px;
	float: left;
	font-size: 14px;
	text-align: center;
	line-height: 55px;
}

.mPersonal-div:hover {
	background-color: #4f4f4f;
	color: white;
}

a {
	margin: 5px;
}

a:link {
	font-size: 14px;
	color: #000;
	text-decoration: none;
}

a:visited {
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
	<div class="head">
		<div class="head-content">
			<img src="/img/logo.png" class="logo-img"> <img
				src="/img/logo-text.png" class="logo-text">
			<ul class="ul-head">
				<li onclick="window.location.href='index'">首页</li>
				<li onclick="window.location.href='sReason'">为什么学编程</li>
				<li onclick="window.location.href='sArticle'">文章专题</li>
				<li onclick="window.location.href='sVideo'">编程课程</li>
				<li onclick="window.location.href='sAbout'">关于我们</li>
			</ul>
			<div class="head-right">
				<c:choose>
					<c:when test="${!empty sessionScope.TeacherInfo }">
						<span>欢迎您，</span>
						<a href="sPersonal-teacher.jsp">${sessionScope.TeacherInfo.tname
							}
							老师</a>
						<span>|</span>
						<c:choose>
							<c:when test="${empty sessionScope.TeacherInfo.timg }">
								<img class="portrait t" src="/img/logo.png">
							</c:when>
							<c:otherwise>
								<img class="portrait t" src="${sessionScope.TeacherInfo.timg }">
							</c:otherwise>
						</c:choose>
						<a href="logOutTeacher.action">注销</a>
					</c:when>
					<c:when test="${!empty sessionScope.SUserInfo }">
						<span>欢迎您，</span>
						<a href="sPersonal.jsp">${sessionScope.SUserInfo.sname } 同学</a>
						<span>|</span>
						<c:choose>
							<c:when test="${empty sessionScope.SUserInfo.simg }">
								<img class="portrait s" src="/img/logo.png">
							</c:when>
							<c:otherwise>
								<img class="portrait s" src="${sessionScope.SUserInfo.simg }">
							</c:otherwise>
						</c:choose>
						<a href="logOut.action">注销</a>
					</c:when>
					<c:when test="${!empty sessionScope.ManagerInfo }">
						<span>欢迎您，</span>
						<a href="Operation">${sessionScope.ManagerInfo.mname }</a>
						<span>|</span>
						<img class="portrait m" src="/img/manager.png">
						<a href="mlogOut.action">注销</a>
					</c:when>
					<c:otherwise>
						<ul class="open">
							<li class="login" style="margin: 0px; padding-left: 30px;">登录</li>
							<li style="padding: 0px 0px;">|</li>
							<li class="register" style="padding-right: 30px;">注册</li>
						</ul>
					</c:otherwise>
				</c:choose>
			</div>

			<!-- -----------------------导航栏 下拉框----------------------- -->

			<div class="dLogin">
				<ul class="dLogin-ul">
					<li style="margin: 0px;"
						onclick="window.location.href='sLogin-teacher'">老师登录</li>
					<li onclick="window.location.href='sLogin'">学生登录</li>

					<li onclick="window.location.href='Manager'">管理员登录</li>
				</ul>
			</div>
			<div class="dRegister">
				<ul class="dRegister-ul">
					<li style="margin: 0px;"
						onclick="window.location.href='sRegister-teacher'">老师注册</li>
					<li onclick="window.location.href='sRegister'">学生注册</li>
				</ul>
			</div>
			<div class="dPersonal">
				<div class="dPersonal-div"
					onclick="window.location.href='sPersonal'">个人中心</div>
			</div>
			<div class="tPersonal">
				<div class="tPersonal-div"
					onclick="window.location.href='sPersonal-teacher'">个人中心</div>
			</div>
			<div class="mPersonal">
				<div class="mPersonal-div"
					onclick="window.location.href='Operation'">管理员操作</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$(".login").mouseover(function() {
				$(".dLogin").css("display", "block");
			})

			$(".dLogin").mouseover(function() {
				$(".dLogin").css("display", "block");
			})

			$(".login").mouseout(function() {
				$(".dLogin").css("display", "none");
			})

			$(".dLogin").mouseout(function() {
				$(".dLogin").css("display", "none");
			})

			$(".register").mouseover(function() {
				$(".dRegister").css("display", "block");
			})

			$(".dRegister").mouseover(function() {
				$(".dRegister").css("display", "block");
			})

			$(".register").mouseout(function() {
				$(".dRegister").css("display", "none");
			})

			$(".dRegister").mouseout(function() {
				$(".dRegister").css("display", "none");
			})

			$(".t").mouseover(function() {
				$(".dPersonal").css("display", "block");
			})

			$(".t").mouseout(function() {
				$(".dPersonal").css("display", "none");
			})

			$(".dPersonal").mouseover(function() {
				$(".dPersonal").css("display", "block");
			})

			$(".dPersonal").mouseout(function() {
				$(".dPersonal").css("display", "none");
			})

			$(".s").mouseover(function() {
				$(".dPersonal").css("display", "block");
			})

			$(".s").mouseout(function() {
				$(".dPersonal").css("display", "none");
			})

			$(".dPersonal").mouseover(function() {
				$(".dPersonal").css("display", "block");
			})

			$(".dPersonal").mouseout(function() {
				$(".dPersonal").css("display", "none");
			})

			$(".m").mouseover(function() {
				$(".mPersonal").css("display", "block");
			})

			$(".m").mouseout(function() {
				$(".mPersonal").css("display", "none");
			})

			$(".mPersonal").mouseover(function() {
				$(".mPersonal").css("display", "block");
			})

			$(".mPersonal").mouseout(function() {
				$(".mPersonal").css("display", "none");
			})

		})
	</script>
</body>
</html>